// 暴露出去一个实例化的 vue-router 的路由实例对象

// 引入 Vue 核心
import Vue from "vue";

// 引入 vue-router 插件
import VueRouter from "vue-router";

// 引入定义好的路由组件 views 文件中写的组件 @ => src
import Films from "@/views/Films";
import FilmsA from "@/views/FilmsA";
import FilmsB from "@/views/FilmsB";
import FilmDetail from "@/views/FilmDetail";
import Home from "@/views/Home";
import Cinemas from "@/views/Cinemas";
import Login from "@/views/Login";
import Center from "@/views/Center";

// 注册 vue-router 插件
Vue.use(VueRouter);

// 实例化 路由实例对象
const router = new VueRouter({
  // 配置选项

  // 路由规则集合
  routes: [
    // 一级路由，要渲染是找的 App.vue 中坑位
    {
      // 首页
      path: "/",
      component: Home,
      children: [
        {
          path: "",
          redirect: "/films/nowPlaying",
        },
        {
          // 电影
          path: "films",
          component: Films,
          children: [
            {
              // 正在热映
              path: "nowPlaying",
              component: FilmsA,
            },
            {
              // 即将上映
              path: "comingSoon",
              component: FilmsB,
            },
          ],
        },
        {
          // 影院
          path: "cinemas",
          component: Cinemas,
        },
      ],
    },
    {
      // 电影详情
      path: "/film/:id",
      name: "detail",
      component: FilmDetail,
      // 额外信息, 可以将一些其它后续需要使用的,放置到这儿.
      meta: {
        // 是否需要登录
        needLogin: true,
      },
      // beforeEnter: function (to, from, next) {
      //   if (localStorage.getItem("token")) {
      //     next();
      //   } else {
      //     // 没有登录,需要先登录一下

      //     // 1. path 路径的方式
      //     // next("/login");

      //     // 2. 对象 的方式
      //     next({
      //       name: "login",
      //     });
      //   }
      // },
    },
    {
      path: "/center",
      name: "center",
      component: Center,
      meta: {
        needLogin: true,
      },
      // beforeEnter: function (to, from, next) {
      //   if (localStorage.getItem("token")) {
      //     next();
      //   } else {
      //     // 没有登录,需要先登录一下

      //     // 1. path 路径的方式
      //     // next("/login");

      //     // 2. 对象 的方式
      //     next({
      //       name: "login",
      //     });
      //   }
      // },
    },
    {
      // login
      path: "/login",
      name: "login",
      component: Login,
    },
  ],
});

router.beforeEach((to, from, next) => {
  console.log(to);
  // 1. 有其他需要做这类校验的路由的话,只需要在下面的 if 条件上添加 ||
  // if (to.name === "detail" || to.name === "center") {

  // 2. 判断 meta 中是否有配置  后续这段代码就不需要懂了,只需要在上面做配置即可.
  // 配置大于代码编写
  // 约定大于配置
  if (to.meta.needLogin) {
    // 判断有没有token, 有就登录了,没有就没登录
    if (localStorage.getItem("token")) {
      next();
    } else {
      next({
        name: "login",
        query: {
          redirect: to.fullPath,
        },
      });
    }
  } else {
    next();
  }
});

// 暴露
export default router;
